{% extends 'knowledge/base.html' %}
{% load static %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'knowledge/css/atom-one-dark.min.css' %}">
<style>
    #markdown-content pre {
        background-color: #000 !important;
        color: #ccc !important;
        padding: 1rem;
        border-radius: 0.5rem;
        overflow-x: auto;
    }
    #markdown-content code {
        color: #ccc !important;
    }
</style>
{% endblock %}

{% block extra_js %}
<script src="{% static 'knowledge/js/highlight.min.js' %}"></script>
{% endblock %}

{% block title %}{{ title }} - {{ collection_name }} - 知识库管理系统{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto">
    <div class="flex items-center mb-6">
        <a href="{% url 'knowledge:collection_detail' collection_name %}" class="text-neutral hover:text-primary mr-4">
            <i class="fa fa-arrow-left"></i>
        </a>
        <div>
            <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">{{ title }}</h2>
            <p class="text-neutral mt-1">
                集合: <span class="font-medium">{{ collection_name }}</span> | 
                文档ID: <code class="bg-gray-100 px-2 py-0.5 rounded text-xs">{{ document_id }}</code>
            </p>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2 space-y-6">
            <!-- 文档内容 -->
            <div class="bg-white rounded-xl p-6 md:p-8 card-shadow">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-lg font-semibold text-gray-800">文档内容</h3>
                    <div class="flex space-x-2">
                        <a href="{% url 'knowledge:edit_document' collection_name document_id %}" class="inline-flex items-center px-3 py-1.5 bg-secondary text-white rounded-lg hover:bg-secondary/90 text-sm transition-colors">
                            <i class="fa fa-pencil mr-1.5"></i>编辑
                        </a>
                        <a href="{% url 'knowledge:delete_document' collection_name document_id %}" class="inline-flex items-center px-3 py-1.5 bg-red-600 text-white rounded-lg hover:bg-red-500 text-sm transition-colors">
                            <i class="fa fa-trash-o mr-1.5"></i>删除
                        </a>
                    </div>
                </div>
                <div class="prose max-w-none text-gray-700 leading-relaxed">
                    <div id="markdown-content"></div>
                        <script src="{% static 'knowledge/js/marked.umd.min.js' %}"></script>
                        <script>
                            document.addEventListener('DOMContentLoaded', function() {
                                const content = "{{ content|escapejs }}";
                                const markdownContent = document.getElementById('markdown-content');
                                markdownContent.innerHTML = marked.parse(content);
                                hljs.highlightAll();
                            });
                        </script>
                </div>
            </div>
        </div>

        <!-- 元数据信息 -->
        <div class="space-y-6">
            <div class="bg-white rounded-xl p-6 card-shadow">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">元数据信息</h3>
                <div class="space-y-3">
                    {% for key, value in metadata.items %}
                    <div>
                        <div class="text-xs font-medium text-neutral uppercase tracking-wider">{{ key }}</div>
                        <div class="text-sm text-gray-700 mt-0.5 break-all">{{ value }}</div>
                    </div>
                    {% empty %}
                    <div class="text-center py-4 text-neutral">
                        <i class="fa fa-info-circle mb-2"></i>
                        <p>暂无元数据信息</p>
                    </div>
                    {% endfor %}
                </div>
            </div>

            <div class="bg-white rounded-xl p-6 card-shadow">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">操作</h3>
                <div class="space-y-3">
                    <a href="{% url 'knowledge:edit_document' collection_name document_id %}" class="block w-full py-2 px-4 bg-primary text-white rounded-lg hover:bg-primary/90 text-center transition-colors">
                        <i class="fa fa-pencil mr-2"></i>编辑文档
                    </a>
                    <a href="{% url 'knowledge:delete_document' collection_name document_id %}" class="block w-full py-2 px-4 bg-red-600 text-white rounded-lg hover:bg-red-500 text-center transition-colors">
                        <i class="fa fa-trash-o mr-2"></i>删除文档
                    </a>
                    <a href="{% url 'knowledge:collection_detail' collection_name %}" class="block w-full py-2 px-4 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 text-center transition-colors">
                        <i class="fa fa-arrow-left mr-2"></i>返回列表
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}